<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px" class="hotel-form">
      <el-form-item label="城市" required>
        <el-select v-model="form.city" placeholder="请选择城市">
          <el-option label="北京" value="北京"></el-option>
          <el-option label="上海" value="上海"></el-option>
          <el-option label="广州" value="广州"></el-option>
          <el-option label="深圳" value="深圳"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="酒店名称" required>
        <el-input v-model="form.name" placeholder="请输入酒店名称"></el-input>
      </el-form-item>
      <el-form-item label="酒店电话" required>
        <el-input v-model="form.phone" placeholder="请输入酒店电话"></el-input>
      </el-form-item>
      <el-form-item label="酒店地址" required>
        <el-input v-model="form.address" placeholder="请输入酒店地址"></el-input>
      </el-form-item>
      <el-form-item label="酒店图片" required>
        <el-upload
          class="hotel-upload"
          action="/api/upload"
          :on-success="handleSuccess"
          :show-file-list="false"
        >
          <i class="el-icon-plus hotel-upload-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="酒店大致价格" required>
        <el-input v-model.number="form.price" placeholder="请输入酒店大致价格"></el-input>
      </el-form-item>
      <el-form-item label="酒店评分" required>
        <el-input v-model.number="form.rating" placeholder="请输入酒店评分"></el-input>
      </el-form-item>
      <el-form-item label="酒店评论" required>
        <el-input type="textarea" v-model="form.comment" placeholder="请输入酒店评论"></el-input>
      </el-form-item>
      <el-form-item label="酒店简介" required>
        <el-input type="textarea" v-model="form.description" placeholder="请输入酒店简介"></el-input>
      </el-form-item>
      <el-form-item label="酒店经纬度" required>
        <el-input v-model="form.latitude" placeholder="请输入经度"></el-input>
        <el-input v-model="form.longitude" placeholder="请输入纬度"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'HotelSystemAdminCc',

  data () {
    return {
      form: {
        city: '',
        name: '',
        phone: '',
        address: '',
        price: 0,
        rating: 0,
        comment: '',
        description: '',
        latitude: '',
        longitude: ''
      }
      cities: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        { value: 'shenzhen', label: '深圳' }
      ],
      uploadUrl: '/api/hotels/upload'
    }
  },
  methods: {
    beforeUpload (file) {
      // 在上传图片之前进行一些处理，例如限制图片大小和格式等
      return true
    },
    handleUploadSuccess (response, file, fileList) {
      // 上传图片成功后的回调函数，可以在这里处理服务器返回的图片地址
      this.form.image = response.imageUrl
    },
    submitForm () {
      // 向后端发送新增酒店的请求
      this.$http.post('/api/hotels/new', this.form).then(response => {
        // 处理新增酒店请求的响应，例如显示提示信息、清空表单等
        this.$message({
          message: '新增酒店成功',
          type: 'success'
        })
        this.$refs.form.resetFields()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pay-address {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
</style>
